<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../global.js"></script>
    <style>
        .wrapper {
            width: 1000px;
            margin: 0 auto;
        }

        .wrapper .timg {
            width: 600px;
            height: 600px;
            background-image: url(img/time.jpg);
            background-size: cover;
            position: relative;
        }

        .timg > div {
            position: absolute;
            top: 0px;
            left: 285px;
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="timg">
        <div id="hour"><img src="img/h.png" alt=""></div>
        <div id="minute"><img src="img/m.png" alt=""></div>
        <div id="second"><img src="img/s.png" alt=""></div>
    </div>
</div>
<script>
    var hour = $('hour');
    var minute = $('minute');
    var second = $('second');
    var time = setInterval(function () {
        var now = new Date();
        var s = now.getSeconds();
        var m = now.getMinutes()+(s/60);

        var h = now.getHours()%12+m/60;
        console.log(s,m+(s/60),(h%12)+(m/60));
        // s++;
        second.style.transform = 'rotate(' + (s * 6) + 'deg)';
        // console.log(s);
        // if (s == 60) {
        //     s = 0;
        //     m++;
        // }
        minute.style.transform = 'rotate(' + (m * 6) + 'deg)';
        // if (m == 60) {
        //     m = 0;
        //     h++;
        // }
        hour.style.transform = 'rotate(' + (h * 30) + 'deg)';
    });

    function $(element) {
        return element === null ? null : document.getElementById(element);
    }
</script>
</body>
</html>